<template>
  <div
    class="container"
    v-infinite-scroll="load"
    :infinite-scroll-immediate="false"
  >
    <span class="title">歌单</span>
    <div class="type_list">
      <div class="item">
        <span>标签</span>
        <div class="tags">
          <el-tag
            round
            @click="tagChange(index)"
            :effect="tagCurrent == index ? 'dark' : 'plain'"
            v-for="(item, index) in tagList"
            :key="index"
            >{{ item.name }}</el-tag
          >
        </div>
      </div>
      <div class="item">
        <span>风格</span>
        <div class="tags">
          <el-tag
            round
            @click="styleChange(index)"
            :effect="styleCurrent == index ? 'dark' : 'plain'"
            v-for="(item, index) in styleList"
            :key="index"
            >{{ item.name }}</el-tag
          >
        </div>
      </div>
      <div class="item">
        <span>场景</span>
        <div class="tags">
          <el-tag
            round
            @click="scenesChange(index)"
            :effect="scenesCurrent == index ? 'dark' : 'plain'"
            v-for="(item, index) in scenesList"
            :key="index"
            >{{ item.name }}</el-tag
          >
        </div>
      </div>
      <div class="item">
        <span>情绪</span>
        <div class="tags">
          <el-tag
            round
            @click="feelChange(index)"
            :effect="feelCurrent == index ? 'dark' : 'plain'"
            v-for="(item, index) in feelList"
            :key="index"
            >{{ item.name }}</el-tag
          >
        </div>
      </div>
    </div>

    <div class="content_list">
      <div
        class="item"
        @click="getSongsInfo(item)"
        v-for="(item, index) in songList"
        :key="index"
      >
        <div
          class="cover"
          @mouseenter="isFocus = index"
          @mouseleave="isFocus = null"
        >
          <el-image :src="baseUrl + item.image" />
          <div class="mask" v-if="isFocus == index">
            <i
              :class="[
                isFocus == index ? 'zoomIn' : '',
                'iconfont',
                'icon-bofang',
              ]"
            ></i>
          </div>
          <div class="measure">
            <el-icon><CaretRight /></el-icon>
            <span>{{ numberFilter(item.views) }}</span>
          </div>
          <div class="classify">
            <span>{{ item.user.nickname }}</span>
          </div>
        </div>
        <span>{{ item.desc }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  songsIndex,
  tagIndex,
  styleIndex,
  feelIndex,
  scenesIndex,
  songsInfo,
} from "@/http/api";
import { PersistentStore } from "@/stores";
const persistentStore = PersistentStore();
const router = useRouter();

const baseUrl = import.meta.env.VITE_API_URL;

const isFocus = ref();

const isReady = ref(false);
const more = ref(true);

const songList = ref([]);
const tagList = ref([]);
const styleList = ref([]);
const feelList = ref([]);
const scenesList = ref([]);

const tagCurrent = ref(0);
const styleCurrent = ref(0);
const feelCurrent = ref(0);
const scenesCurrent = ref(0);
const page = ref(1);

onMounted(() => {
  Promise.all([getTag(), getStyle(), getFeel(), getScenes()]).then(() => {
    isReady.value = true;
    getList();
  });
});

const numberFilter = (e) => {
  let num = "";
  if (e > 10000) {
    num = (e / 10000).toFixed(2);
    return num + "万";
  } else {
    return e;
  }
};

const getList = async () => {
  const { data } = await songsIndex({
    page: page.value,
    limit: 21,
    tag: tagList.value[tagCurrent.value].id,
    style: styleList.value[styleCurrent.value].id,
    scenes: scenesList.value[scenesCurrent.value].id,
    feel: feelList.value[feelCurrent.value].id,
  });
  data.songs.data.length
    ? songList.value.push(...data.songs.data)
    : (more.value = false);
};

const getSongsInfo = async (e) => {
  const { data } = await songsInfo({
    id: e.id,
  });
  const url = router.resolve("/play_music");
  const arr = {
    id: e.id,
    index: 0,
    list: data.songs.list,
  };
  persistentStore.setSongListInfo(arr);
  window.open(url.href, url.href).postMessage(JSON.stringify(arr));
};

const tagChange = (i) => {
  tagCurrent.value = i;
  initList();
};

const styleChange = (i) => {
  styleCurrent.value = i;
  initList();
};

const feelChange = (i) => {
  feelCurrent.value = i;
  initList();
};

const scenesChange = (i) => {
  scenesCurrent.value = i;
  initList();
};

const initList = () => {
  page.value = 1;
  songList.value = [];
  more.value = true;
  getList();
};

// 筛选条件
const getTag = async () => {
  const { data } = await tagIndex();
  tagList.value = [
    {
      name: "全部",
      id: "",
    },
    ...data.tag,
  ];
};
const getStyle = async () => {
  const { data } = await styleIndex();
  styleList.value = [
    {
      name: "全部",
      id: "",
    },
    ...data.style,
  ];
};
const getFeel = async () => {
  const { data } = await feelIndex();
  feelList.value = [
    {
      name: "全部",
      id: "",
    },
    ...data.feel,
  ];
};
const getScenes = async () => {
  const { data } = await scenesIndex();
  scenesList.value = [
    {
      name: "全部",
      id: "",
    },
    ...data.scenes,
  ];
};

const load = () => {
  if (more.value && isReady.value) {
    page.value++;
    getList();
  }
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
